<!--
 * @Date: 2022-06-29 09:25:09
 * @LastEditTime: 2022-07-14 10:43:32
-->
<template>
  <div id="hm">
    <div id="hm-navBar"><NavBar/></div>
    <div id="hm-body">
      <div id="hm-main">
        <!-- <div class="displayItem">
          <DisplayContainer :videoDetail="videos[0]" />
        </div>
        <div id="hm-starDisplay">
          <StarDisplay :videoDetail="videos[0]" />
        </div> -->
        <!-- <Homeview /> -->
        <router-view name="main"/>
      </div>
      <div id="hm-mid"></div>
      <div id="hm-aside">
        <!-- <div id="hm-rank">
          <TextRank :videosDetail="videos"/>
        </div> -->
        <router-view name="aside"/>
      </div>
    </div>
    <!-- <div id="hm-footer"></div> -->
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import videos from '@/assets/test.js'
// import TextRank from '@/components/display/rank/TextRank.vue'
// import DisplayContainer from '@/components/display/DisplayContainer.vue'
// import StarDisplay from '@/components/display/StarDisplay.vue'
// import Homeview from '@/components/display/Homeview.vue'
// import TextRank from '@/components/TextRank.vue'
export default {
  name: 'hm',
  components: {
    NavBar
    // TextRank,
    // DisplayContainer,
    // StarDisplay
    // Homeview
  },
  data: () => {
    return {
      videos: []
    }
  },
  mounted: function () {
    // console.log(videos)
    this.videos = videos
    // console.log(this.videos)
  }
}
</script>

<style>
#hm {
  display: flex;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#hm-navBar {
  width: 100%;
}
#hm-body {
  /* min-height: calc(100% - 143px); */
  min-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.clickbtn {
  cursor: pointer;
}
#hm-main {
  width: 69%;
  height: 100%;
}
#hm-aside {
  width: 29%;
  height: 100%;
}
#hm-mid {
  height: 100%;
  width: 2%;
}
.el-carousel .el-carousel__container .el-carousel__item {
  display: flex;
}
</style>
